<template>
    <div>
        <ul class="xl-timeline" >
            <li  class="xl-timeline-item" v-for="(item,index) in ls" :key="index" >
                <div class="xl-timeline-time">
                    <div class="d-table">
                        <div class="d-row">
                            <div class="d-cell" v-if="$scopedSlots.timestamp">
                                <slot :data="item" name="timestamp"></slot>
                            </div>
                            <div class="d-cell"  v-html="item[leftProp]" v-else>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="xl-timeline-tail">
                <span v-if="$slots.firstIcon" class="top-icon">
                    <slot name="first-icon"></slot>
                </span>
                    <span v-else class="xl-timeline-icon">
                    <span v-if="index===0" class="top-icon first-icon"></span>
                </span>
                    <span v-if="$slots.icon" class="bottom-icon">
                     <slot name="icon" ></slot>
                </span>
                    <span v-else class="xl-timeline-icon">
                    <span class="bottom-icon default-icon"></span>
                </span>

                </div>
                <div class="xl-timeline-content">
                    <slot :data="item"></slot>
                </div>
            </li>
        </ul>
        <img  v-if="ls&&!ls.length" :src="require('@/assets/nodata.png')"  class="xl-nodata" >
    </div>

</template>

<script>
export default {
  name: 'xl-timeline',
  data() {
    return {
      ls: this.list,
    }
  },
  props: {
    leftProp: {
      type: String,
      default: 'timestamp'
    },
    list: {
      type: Array,
      default() {
        return [];
      }
    },
  },
  watch: {
    list: {
      handler(nv, o) {
        this.ls = nv;
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    loadMore() {
      console.info('loadMore')
    }
  }

}
</script>

<style scoped lang="less">
    .xl-timeline{
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 15px;
        .xl-timeline-item{
            position: relative;
            padding:0;
            display: flex;
            justify-content: space-evenly;

            .xl-timeline-tail {
                width: 1px;
                background: #ccc;
                position: relative;
                margin: 0 9px;
                .top-icon{
                    position: absolute;
                    width: 10px;
                    height: 10px;
                    top: 0;
                    left: -5px;
                }
                .first-icon{
                    position: absolute;
                    width: 12px;
                    height: 12px;
                    top: 0;
                    left: -6px;
                    border-radius: 50%;
                    background-color: #efeff4;
                    background-image: url("~@/assets/timer.png");
                    background-repeat: no-repeat;
                    background-position: 50%;
                    background-size: 100%;
                }
                .bottom-icon{
                    position: absolute;
                    width: 12px;
                    height: 12px;
                    top: 50%;
                    left: -6px;
                    transform: translate(0,-50%);
                    -webkit-transform: translate(0,-50%);
                    -moz-transform: translate(0,-50%);
                }
                .default-icon{
                    border-radius: 50%;
                    background-color: #216ab7;

                }

            }
            .xl-timeline-time{
                width: 90px;
                text-align: center;
            }
            .xl-timeline-content{
                padding:15px 5px 0;
                flex: 1;
            }
        }
    }
</style>
